<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drag</title>
    <script src="javascripts/jquery.min.js"></script>
</head>
<style>
    html, body {
        height: 100%;
    }

    #pms {
        width: 420px;
        height: 100%;
        position: fixed;
        right: 0px;
        top: 0px;
        border-left: 10px solid #ddd;
        -webkit-box-shadow: 0 0 10px #ccc;
        -moz-box-shadow: 0 0 10px #ccc;
        box-shadow: 0 0 10px #ccc;
        cursor: e-resize;
    }

    #zz {
        position: absolute;
        width: 100%;
        height: 100%;
        display: none;
    }

    #float {
        width: 418px;
        border: 4px solid #000;
        height: 100%;
        position: fixed;
        top: 0;
        display: none;
        z-index: 2;
        right: 0;
        box-sizing: border-box;
    }

    .frame-cover {
        position: absolute;
        width: 100%;
        height: 100%;
        background: red;
        opacity: .5;
        top: 0;
        left: 0;
        z-index: 20;
    }

    .frame-cover2 {
        position: fixed;
        width: 100%;
        height: 100%;
        background: pink;
        opacity: .5;
        top: 0;
        left: 0;
        z-index: 99;
    }
</style>
<body>
<iframe src="http://www.baidu.com" frameborder="0" style="width: 600px;height: 600px;"></iframe>
<div>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf <br>
</div>
<div id="float"></div>
<div id="pms">
    <iframe src="http://www.163.com" frameborder="0" style="width: 100%;height: 100%;"></iframe>
</div>
</body>
</html>
<script>
   // window.onload = function () {
        var pms = $("#pms");
        var body = $("body");
        var divFloat = $("#float");
        body.on({
            mousedown: function (event) {
                event.preventDefault();
                if (event.target.id == 'pms') {
                    var div = "<div class='frame-cover'></div>";
                    var div2 = "<div class='frame-cover2'></div>";
                    pms.append(div);
                    body.eq(0).append(div2);
                    divFloat.show();
                    //debugger;
                    if (pms[0].offsetWidth >= 421) {
                        //debugger;
                        body.on({
                            mousemove: function (event2) {
                                divFloat.width(window.innerWidth - event2.clientX);
                                if (window.innerWidth - event2.clientX <= 420) {
                                    divFloat.width(420);
                                    return false;
                                }
                            }
                        })
                    }
                }
                body.on({
                    mouseup: function (event) {
                        pms.width(divFloat.width());
                        divFloat.hide();
                        body.unbind("mousemove");
                        if (!!$(".frame-cover")) $(".frame-cover").remove();
                        if (!!$(".frame-cover2")) $(".frame-cover2").remove();
                    }
                })
            }
        })
    //}
</script>